
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Page</title>
    <meta charset="utf-8">
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        ul li{
            display: block;
            float: left;
            height: inherit;
            overflow: hidden;
            margin: 0px 3px;
        }
        ul li a{
            padding: 0px 8px;
            float: left;
            display: block;
            height: 30px;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
            border-radius: 2px;
            text-decoration: none;
            user-select: none;
            transition: all 0.2s;
            background-color: rgb(255, 255, 255);
            color: rgb(0, 0, 0);
            border: 1px solid rgb(221, 221, 221);
            width: 23px;
            font-size: 13px;
            font-weight: 400;
        }
        .otherBtns, .centerBtns, .jumpBtns {
            float: left;
            height: inherit;
        }
        .otherLeft a{
            padding: 0px 8px; float: left; display: block; height: 30px; line-height: 30px; text-align: center; cursor: not-allowed; border-radius: 2px; text-decoration: none; user-select: none; transition: all 0.2s; background-color: rgb(255, 255, 255); margin: 0px 3px; color: rgb(0, 0, 0); border: 1px solid rgb(221, 221, 221);
        }
        .otherRight a, .jumpBtns a{
            padding: 0px 8px; float: left; display: block; height: 30px; line-height: 30px; text-align: center; cursor: pointer; border-radius: 2px; text-decoration: none; user-select: none; transition: all 0.2s; background-color: rgb(255, 255, 255); margin: 0px 3px; color: rgb(0, 0, 0); border: 1px solid rgb(221, 221, 221);
        }
    </style>
</head>
<body>
<br />
<div style="margin:50px auto;width:1000px;">
    <p style="font-size:18px;font-family:'微软雅黑';">样式参考,自定义小清新皮肤,有跳转框,滚动模式：</p><br />
    <div class="page_div2 paging" onselectstart="return false" style="font-size: 13px; font-family: 微软雅黑; font-weight: 400; height: 32px;">
        <div class="otherBtns otherLeft">
            <a value="首页">首页</a>
            <a value="上一页" >&lt;&lt;</a>
        </div>
        <div class="centerBtns" style="position: relative; overflow: hidden; width: 426px;">
            <ul style="position: absolute; height: inherit; list-style: none; left: 0px; top: 0px; margin: 0px; padding: 0px; width: 2900px;">
                <li >
                    <a value="1">1</a></li>
                <li >
                    <a value="2" >2</a></li>
                <li >
                    <a value="3" >3</a></li>
                <li >
                    <a value="4" >4</a></li>
                <li >
                    <a value="5" >5</a></li>
                <li >
                    <a value="6" >6</a></li>
                <li >
                    <a value="7" >7</a></li>
                <li >
                    <a value="8" >8</a></li>
                <li >
                    <a value="9" >9</a></li>
                <li >
                    <a value="10" >10</a></li>
                <li >
                    <a value="11" >11</a></li>
                <li >
                    <a value="12" >12</a></li>
                <li >
                    <a value="13" >13</a></li>
                <li >
                    <a value="14" >14</a></li>
                <li >
                    <a value="15" >15</a></li>
                <li >
                    <a value="16" >16</a></li>
                <li >
                    <a value="17" >17</a></li>
                <li >
                    <a value="18" >18</a></li>
                <li >
                    <a value="19" >19</a></li>
                <li >
                    <a value="20" >20</a></li>
                <li >
                    <a value="21" >21</a></li>
                <li >
                    <a value="22" >22</a></li>
                <li >
                    <a value="23" >23</a></li>
                <li >
                    <a value="24" >24</a></li>
                <li >
                    <a value="25" >25</a></li>
                <li >
                    <a value="26" >26</a></li>
                <li >
                    <a value="27" >27</a></li>
                <li >
                    <a value="28" >28</a></li>
                <li >
                    <a value="29" >29</a></li>
                <li >
                    <a value="30" >30</a></li>
                <li >
                    <a value="31" >31</a></li>
                <li >
                    <a value="32" >32</a></li>
                <li >
                    <a value="33" >33</a></li>
                <li >
                    <a value="34" >34</a></li>
                <li >
                    <a value="35" >35</a></li>
                <li >
                    <a value="36" >36</a></li>
                <li >
                    <a value="37" >37</a></li>
                <li >
                    <a value="38" >38</a></li>
                <li >
                    <a value="39" >39</a></li>
                <li >
                    <a value="40" >40</a></li>
                <li >
                    <a value="41" >41</a></li>
                <li >
                    <a value="42" >42</a></li>
                <li >
                    <a value="43" >43</a></li>
                <li >
                    <a value="44" >44</a></li>
                <li >
                    <a value="45" >45</a></li>
                <li >
                    <a value="46" >46</a></li>
                <li >
                    <a value="47" >47</a></li>
                <li >
                    <a value="48" >48</a></li>
                <li >
                    <a value="49" >49</a></li>
                <li >
                    <a value="50" >50</a></li>
                <li >
                    <a value="51" >51</a></li>
                <li >
                    <a value="52" >52</a></li>
                <li >
                    <a value="53" >53</a></li>
                <li >
                    <a value="54" >54</a></li>
                <li >
                    <a value="55" >55</a></li>
                <li >
                    <a value="56" >56</a></li>
                <li >
                    <a value="57" >57</a></li>
                <li >
                    <a value="58" >58</a></li>
                <li >
                    <a value="59" >59</a></li>
                <li >
                    <a value="60" >60</a></li>
                <li >
                    <a value="61" >61</a></li>
                <li >
                    <a value="62" >62</a></li>
                <li >
                    <a value="63" >63</a></li>
                <li >
                    <a value="64" >64</a></li>
                <li >
                    <a value="65" >65</a></li>
                <li >
                    <a value="66" >66</a></li>
                <li >
                    <a value="67" >67</a></li>
                <li >
                    <a value="68" >68</a></li>
                <li >
                    <a value="69" >69</a></li>
                <li >
                    <a value="70" >70</a></li>
                <li >
                    <a value="71" >71</a></li>
                <li >
                    <a value="72" >72</a></li>
                <li >
                    <a value="73" >73</a></li>
                <li >
                    <a value="74" >74</a></li>
                <li >
                    <a value="75" >75</a></li>
                <li >
                    <a value="76" >76</a></li>
                <li >
                    <a value="77" >77</a></li>
                <li >
                    <a value="78" >78</a></li>
                <li >
                    <a value="79" >79</a></li>
                <li >
                    <a value="80" >80</a></li>
                <li >
                    <a value="81" >81</a></li>
                <li >
                    <a value="82" >82</a></li>
                <li >
                    <a value="83" >83</a></li>
                <li >
                    <a value="84" >84</a></li>
                <li >
                    <a value="85" >85</a></li>
                <li >
                    <a value="86" >86</a></li>
                <li >
                    <a value="87" >87</a></li>
                <li >
                    <a value="88" >88</a></li>
                <li >
                    <a value="89" >89</a></li>
                <li >
                    <a value="90" >90</a></li>
                <li >
                    <a value="91" >91</a></li>
                <li >
                    <a value="92" >92</a></li>
                <li >
                    <a value="93" >93</a></li>
                <li >
                    <a value="94" >94</a></li>
                <li >
                    <a value="95" >95</a></li>
                <li >
                    <a value="96" >96</a></li>
                <li >
                    <a value="97" >97</a></li>
                <li >
                    <a value="98" >98</a></li>
                <li >
                    <a value="99" >99</a></li>
                <li >
                    <a value="100" >100</a></li>
            </ul>
        </div>
        <div class="otherBtns otherRight">
            <a value="下一页">&gt;&gt;</a>
            <a value="尾页">尾页</a>
        </div>
        <div class="jumpBtns">
            <input type="text" class="jump_input" data="" style="width: 60px; float: left; height: 30px; outline: none; text-align: center; border-radius: 2px; border: 1px solid rgb(221, 221, 221); margin: 0px 3px; color: rgb(0, 0, 0); line-height: 30px;">
            <a class="jump_a" data="0">跳转</a>
        </div>
    </div>
</div>

<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">


    $this = $("body");
    var init = true;
    var currentPage = 1; //当前页
    var gapWidth = 3;     //间隙宽度
    var total = 100; //总页数
    var first = 1;   //中间显示页的起始位置，初始为1
    var showPage = 9; //显示的页数
    var middle = Math.ceil(showPage / 2);     //向上取整，获得中间数，用以后面计算出需要滚动的页数
    var last = showPage;  //中间显示页的终止位置，初始为显示页的长度
    var slideBool = true; //开起按钮点击

    var currentBgColor = "#f79898";
    var centerBgColor = "#fff";
    var currentFontColor = "#fff";
    var centerFontColor = "#000";
    var centerBorder = "1px solid #ddd";
    var currentBorder = "1px solid #f79898";
    var currentFontSize = 13;
    var fontSize = 13;
    var fontWeight = 400;   //字体宽度
    var currentFontWeight = 400;
    //去除火狐浏览器的transition样式
    if (/mozilla/.test(navigator.userAgent.toLowerCase()) && !/(compatible|webkit)/.test(navigator.userAgent.toLowerCase())) {
        $this.find("a").css("transition", "none");
    }

    $this.find(".centerBtns a").each(function (index, element) {
        $(element).click(function () {
            if(!slideBool){
                return;
            }
            if(!init){
                if(currentPage == index+1){
                    return
                }else{
                    currentPage = index+1;
                }
            }else{
                init = false;
            }
            clickPage = parseInt($(element).attr("value"), 10);  //点击页码
            //设置选中效果
            $this.find(".centerBtns a").each(function (suffix, item) {
                if (parseInt($(item).attr("value"), 10) == clickPage) {
                    if (!!currentBgColor.replace(/\s/g, ""))
                        $(item).css({ "background-color": currentBgColor }).parent().siblings().children().css({ "background-color": centerBgColor.replace(/\s/g, "") });
                    if (!!currentFontColor.replace(/\s/g, ""))
                        $(item).css({ "color": currentFontColor }).parent().siblings().children().css({ "color": centerFontColor.replace(/\s/g, "") });
                    if (!!currentBorder.replace(/\s/g, ""))
                        $(item).css({ "border": currentBorder }).parent().siblings().children().css({ "border": centerBorder });
                    if (!!currentFontSize)
                        $(item).css({ "font-size": currentFontSize + "px" }).parent().siblings().children().css({ "font-size": fontSize + "px" });
                    if (!!fontWeight)
                        $(item).css({ "font-weight": currentFontWeight }).parent().siblings().children().css({ "font-weight": fontWeight });
                }
            });


            var left = -parseInt($this.find("ul").css("left").replace(/\D/g, ""), 10); //获得当前ul的left坐标
            var liWidth = parseInt($this.find("ul li").eq(0).css("width").replace(/\D/g, ""), 10);   //单个li的宽度

            var slidePage = clickPage - middle;   //需要滑动的页数，正负表示左右方向
            console.log(index)

            //动画
            if (slidePage > 0 && last < total) {   //判断是否符合滚动规则 往右

                var beforeLast = last;

                //设置参数
                last += slidePage;
                if (last > total) {       //判断末尾移动长度大于的情况
                    last = total;
                    slidePage = total - beforeLast;
                }
                first += slidePage;
                middle += slidePage;

                //获得滚动宽度
                debugger
                var slideWidth = slidePage * liWidth + (gapWidth * 2) * slidePage;

                //动画
                slideBool = false; //禁止按钮点击
                $this.find("ul").animate({ "left": left - slideWidth + "px" }, 300, function () {
                    slideBool = true;  //开启按钮点击
                });
            } else if (slidePage < 0 && first > 1) {    //判断是否符合滚动规则  往左

                var beforeFirst = first;

                //设置参数
                first += slidePage;
                if (first < 1) {       //判断开头移动长度少于的情况
                    first = 1;
                    slidePage = 1 - beforeFirst;
                }
                last += slidePage;
                middle += slidePage;

                //获得滚动宽度
                var slideWidth = slidePage * liWidth + (gapWidth * 2) * slidePage;

                //动画
                slideBool = false;  //禁止按钮点击
                $this.find("ul").animate({ "left": left - slideWidth + "px" }, 300, function () {
                    slideBool = true;  //开启按钮点击
                });
            }
        });
    });


    //获得中间div的长度和ul的长度并设置
    var centerWidth = 0;
    var centerAllWidth = 0;
    if (total > 0) {
        centerWidth = parseInt($this.find("ul li").eq(0).css("width").replace(/\D/g, ""), 10) * showPage;     //中间div的总宽度
        centerAllWidth = parseInt($this.find("ul li").eq(0).css("width").replace(/\D/g, ""), 10) * $this.find("ul li").length;     //中间ul的总宽度
    }

    if (!!gapWidth) {
        centerWidth += (showPage + 1) * (gapWidth * 2) - (gapWidth * 2);
        centerAllWidth += (total + 1) * (gapWidth * 2) - (gapWidth * 2);
    }

    //设置中间div宽度和其它样式
    $this.find(".centerBtns").css({
        "position": "relative",
        "overflow": "hidden",
        "width": centerWidth + "px"
    });

    //设置中间div内ul的宽度
    $this.find(".centerBtns ul").css({
        "width": centerAllWidth + "px"
    });


    //初始化显示
    //    if (opts.animation)
    $this.find(".centerBtns a").eq(currentPage - 1).trigger("click");   //初始化后自动展示到当前页，方式为滚动





</script>
</body>
</html>
